<template>
	<ul class="student_overview flex" v-if="pageflag">
		<li class="student_overview_item">
			<dv-border-box-5 :color="['#015c31', '#009a44']" class="label_border_box" :reverse="true">
				<div class="student_overview_title title_right">注册新生总数</div>
				<div class="student_overview_num total_num">
					<dv-digital-flop :config="total_num_config" style="height: 100px;" />
				</div>
				<!-- <div class="student_overview_num total_num">{{ total_num }}</div> -->
			</dv-border-box-5>
		</li>

		<li class="student_overview_item">
			<dv-border-box-5 :color="['#015c31', '#009a44']" class="label_border_box">
				<div class="student_overview_title title_left">今日注册新生数</div>
				<div class="student_overview_num today_num">
					<dv-digital-flop :config="today_num_config" style="height: 100px;" />
				</div>
			</dv-border-box-5>
		</li>
	</ul>
	<Reacquire v-else @onclick="getData" line-height="200px">
		重新获取
	</Reacquire>
</template>

<script>
export default {
	data() {
		let data = {
			pageflag: true,
			regionCode: "china",
			total_num_config: {
				number: [0],
				content: '{nt}',
				style: {
					fontFamily: "DsDigit",
					fontSize: 80,
					// fontWeight: 600,
					fill: "#a23e0a",
				},
				animationCurve: "easeInOutQuad",
				animationFrame: 30,
			},
			today_num_config: {
				number: [0],
				content: '{nt}',
				style: {
					fontFamily: "DsDigit",
					fontSize: 80,
					// fontWeight: 600,
					fill: "#a23e0a",
				},
				animationCurve: "easeInOutQuad",
				animationFrame: 30,
			},
		};
		return data;
	},
	filters: {
		numsFilter(msg) {
			return msg || 0;
		},
	},
	created() {
		this.getDataByRegionCode("china");
	},
	mounted() {
	},
	beforeDestroy() {
		this.clearData();

	},
	methods: {
		clearData() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		// 设置数据
		getDataByRegionCode(regionCode) {
			// console.log("center-top receive regionCode", regionCode);
			this.pageflag = true;
			this.regionCode = regionCode;

			this.$axios.get(`/api/result/total`).then((res) => {
				if (res.code == 0) {
					this.total_num_config = {
						...this.total_num_config,
						number: [res.data || 0],
					};
					if (regionCode == "china" || regionCode == "100000") {
						this.today_num_config = {
							...this.today_num_config,
							number: [res.data || 0],
						};
					}
				} else {
					this.$Message.warning(res.message);
				}
			});
			if (regionCode != "china" && regionCode != "100000") {
				this.$axios.get(`/api/result/province/${regionCode}`).then((res) => {
					console.log("地区人数", regionCode, res.data[regionCode], res);
					if (res.code == 0) {
						this.today_num_config = {
							...this.today_num_config,
							number: [res.data[regionCode] || 0],
						};
					} else {
						this.$Message.warning(res.message);
					}
				});

			}

		},
		// 设置数据
		// setData(newData) {
		// 	console.log("center-top setData", newData);
		// 	this.pageflag = true;
		// 	this.regionCode = newData.regionCode;
		// 	this.total_num = newData.total_num;
		// 	this.today_num = newData.today_num;
		// },
		//轮询
		switper() {
			if (this.timer) {
				return;
			}
			let looper = (a) => {
				this.getDataByRegionCode(this.regionCode);
			};
			this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
		},
	},
};
</script>

<style lang='scss' scoped>
.student_overview {
	li {
		flex: 1;
		margin: 25px;

		.label_border_box {
			box-sizing: border-box;

			:deep(.border-box-content) {
				box-sizing: border-box;
				padding: 6px 16px 0px;
			}
		}

		.student_overview_title {
			margin: 45px 32px 0px;

			font-size: 30px;
			font-weight: 900;
			letter-spacing: 2px;
			background: linear-gradient(92deg,
					#015c31 0%,
					#009a44 48%,
					#015c31 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.title_left {
			text-align: left;
		}

		.title_right {
			text-align: right;
		}

		.student_overview_num {
			width: 100%;
			height: 100px;
			text-align: center;
			line-height: 100px;
			font-size: 64px;
			margin: 0px 0 30px;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}

			&.bachground_animation::before {
				animation: rotating 14s linear infinite;
			}
		}
	}
}
</style>